// 在此处制定任务
const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      cleanCss = require('gulp-clean-css'),
      autoprefixer = require('gulp-autoprefixer'),
      uglify = require('gulp-uglify'),
      babel = require('gulp-babel'),
      del = require('del'),
      connect = require('gulp-connect'),
      sass = require('gulp-sass'),
      { createProxyMiddleware } = require('http-proxy-middleware')
        // 解决代理跨域的问题

// 集中管理路径
const paths = {
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css: {
        src: 'src/css/**',
        dest: 'dist/css'
    },
    js: {
        src: 'src/js/**',
        dest: 'dist/js'
    },
    img: {
        src: 'src/images/**',
        dest: 'dist/images'
    },
    libs: {
        src: 'src/libs/**',
        dest: 'dist/libs'
    },
    ico: {
        src: 'src/favicon.ico',
        dest:'dist'
    }
}

// 制定删除dist的任务
const delDist = () => del('dist')

// 制定html任务
const html = () => {
    return gulp.src(paths.html.src)
        .pipe(htmlmin({
            removeComments: true, // 清除HTML注释
            collapseWhitespace: true, // 压缩HTML
            collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
            minifyJS: true, // 压缩页面JS
            minifyCSS: true // 压缩页面CSS 
        }))
        .pipe(gulp.dest(paths.html.dest))
        .pipe(connect.reload())
}

// 制定css任务
const css = () => {
    return gulp.src(paths.css.src)
        .pipe(sass())
        .pipe(autoprefixer({
            presets: ['@babel/env']
        }))
        .pipe(cleanCss())
        .pipe(gulp.dest(paths.css.dest))
        .pipe(connect.reload())
}

// 制定js任务
const js = () => {
    return gulp.src(paths.js.src)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(paths.js.dest))
        .pipe(connect.reload())
}

// 制定image和libs任务
const img = () => {
    return gulp.src(paths.img.src)
        .pipe(gulp.dest(paths.img.dest))
}

const libs = () => {
    return gulp.src(paths.libs.src)
        .pipe(gulp.dest(paths.libs.dest))
}

// 制定添加ico图标的任务
const ico = () => gulp.src(paths.ico.src).pipe(gulp.dest(paths.ico.dest))

// 制定监听任务
const watch = () => {
    gulp.watch(paths.html.src, html)
    gulp.watch(paths.css.src, css)
    gulp.watch(paths.js.src, js)
}

// 制定开启服务器任务
const server = () => {
    connect.server({
        root: 'dist',
        port: '5252',
        livereload: true,
        middleware () {
            // 代理跨域：把以/api开头的请求代理到bilibili的接口
            return [
              createProxyMiddleware('/api', {
                target: 'https://show.bilibili.com',
                changeOrigin: true
              })
            ]
          }
    })
}

// 导出
module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, watch, server, ico))